<%@ include file="/common/taglibs.jsp" %>
<style type="text/css">

#box-table-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 5px;
	text-align: left;
	width:90%;
	border-collapse: collapse;
}
#box-table-a th
{
	font-size: 13px;
	font-weight: normal;
	padding: 4px;
	background: #8A9F48;
	border-top: 4px solid #C5E367;
	border-bottom: 1px solid #fff;
	color: #fff;
}
#box-table-a td
{
	padding: 4px;
	background: #F7FFDC; 
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#box-table-a tr.toHide td {
	background: #fff;
	border: 1px solid #F7FFDC;
}
#box-table-a tr:hover td
{
	background: #EEFFB9;
	color: #339;
}




</style>
<div>
<br />
	<div class="info">
		<h2>Manage Companies</h2>
		<p><a href="/accounts/create.html">create new company</a> or <a href="/accounts/import.html">import companies</a></p>
	</div>
	<div class="datagrid">
	<table id="box-table-a">
		<thead>
			<tr>
				<th scope="col" id="name">Name</th>
				<th scope="col" id="users">Users</th>
				<th scope="col" id="cat">Categorization</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="3">testing the footer</td>
			</tr>
		</tfoot>
		<tbody>
	<c:forEach items="${companies}" var="company" >
			<tr id="<c:out value="${company.id }" />">
				<td>
					<strong><a href="#" onclick="loadPageInContentArea('accounts/editCompany.html?companyid=<c:out value="${company.id }" />', true);"><c:out value="${company.name }" /></a>[<c:out value="${company.id }" />]</strong><br/>
					<c:out value="${company.primaryAddress }" />
				</td>
				<td>
					<c:out value="${company.numberOfAssociatedUsers }" />
				</td>
				<td>
					<c:forEach items="${company.roles }" var="role">
						<c:out value="${role.name }" />&nbsp;
					</c:forEach>
				</td>
			</tr>
	</c:forEach>
		</tbody>
	</table>
	<ul id="roles">
	
	</ul>
	<script type="text/javascript">
	/*	$('tbody tr.toHide').each(function(){
				$(this).hide();
			});
		$('tbody tr').click(function(){$('tr#hidden_' + this.id).toggle();});
		$.ajax({
			url: '/grouper-webapp/accounts/companyRoleXml.html?parent=',
			type: 'GET',
			dataType: 'html',
			timeout: 1000,
			error: function(e){alert('error' + e);},
			success: function(xml){
					$(xml).find('role').each(function(){
							var item_text = $(this).attr('name');
							var item_id = $(this).attr('id');
							$('<li></li>').html(item_text).attr('id',item_id).click(function(){
									alert('this clicked' + $(this).attr('id'));
								}).appendTo('ul#roles');
						});
				}
			});*/
	</script>
	<div>
		<a href="#">&laquo;</a> < 1 2 3 4 5 6 > <a href="#">&raquo;</a>
	</div>
</div>
